<template>
	<view>
		<view class="fanku_con">
			<view class="img_z">
				<view class="imgadf center" @click="ongetimg()">
					<image style="width: 58rpx;height: 58rpx;" src="./tupianadd.png" mode=""></image>
					<text style="margin-top: 5rpx;">上传图片</text>
				</view>
				<view style="position: relative;" v-for="(item,index) in img_list" :key="index">
					<image @click="preview(index,img_list)" style="width: 120rpx;height: 120rpx;margin-left: 20rpx;margin-bottom: 20rpx;background-color:rgba(0,0,0,0.1);border-radius: 10rpx;"
					 :src="typeof item == 'object' ? item.url:item"></image>
					<image class="shancs" src="./shanchus2.png" mode="" @click="selec(index)"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
    var util = require("../../common/util");
    var api = require("../../common/api");
	export default {
		data() {
			return {
                img_list_fileId:[],
			}
		},
		props: {
            fild_list:{
                 type:Array
            },
            img_list : {
                type:Array
            },
            linename:{
                type: String,
            },
            num:{
                
            },
			// 最多上数量 1-9
			count: {
				type: Number,
				default: false
			},
			//图片上传地址
			url: {
				type: String,
				default: ''
			},
			//文件对应的 key 
			name: {
				type: String,
				default: ''
			},
			//请求头
			header: {
				type: Object,
				default: {}
			},
            formData:{
                type: Object,
                default: {
                    
                }
            },
            visualAngle: {
            	
            },
            dljType: {
            	type: Number
            },
            pointType: {
            	type: Number
            },
            id: {
            	type: String,
            	default: ''
            },
            linenameId:{
                type: String,
                default: ''
            },
            fileId :{
                type: String,
                default: ''
            },
		},
		computed: {},
        onLoad() {
           // this.img_list = images_list? images_list : []
        },
        created() {
            
        },
        mounted() {
            // console.log(this.img_list)
        },
		methods: {
			ongetimg() { //上传图片方法
				var that = this
                var obj = {
                     linename:that.linename,
                     num:that.num
                  } 
                var obj1 = {
                    num:that.num,
                    linenameId:that.linenameId,
                    id:that.id,
                    pointType:that.pointType,
                    dljType:that.dljType,
                    visualAngle:that.visualAngle,
                }
                
                var obj2 = {
                    linenameId:that.linenameId,
                    pointType:that.pointType,
                    id:that.id,
                    num:""
                }
                if(that.pointType != 4 && that.pointType != 5){
                    var  data = obj2
                }else if(that.pointType == 5){
                    var data = obj1
                }else if(that.pointType == 4){
                    var data = obj 
                    console.log(data)
                }
                
				if (!that.url) {
					return uni.showToast({
						title: '请填写上传地址',
						icon: 'none',
						position: 'bottom'
					});
				}
                // console.log(this.img_list)
                if( (this.img_list? this.img_list.length : 0) >=20){
                    return uni.showToast({
                        icon:"none",
                        title:"上传图片不能超过20张"
                    })
                }
				uni.chooseImage({ //选中本地图片
					count: 20 - (this.img_list? this.img_list.length : 0),
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album','camera'], //从相册选择
					success: res => {
                        console.log(res)
						uni.showLoading({ //加载框
							title: '加载中...'
						})
						    const tempFilePaths = res.tempFilePaths;
                            console.log(data)
                            console.log(that.url)
                            // console.log(item)
                            res.tempFilePaths.forEach((item, index) => { //本地选中的图片组
                            	uni.uploadFile({ //上传图片
                                
                            		url: that.url, //上传接口地址
                            		filePath: item, //一张图
                            		name: that.name,
                                    formData:data,
                            		header: that.header== {}? that.header : {
                                        Authorization:'Bearer' + uni.getStorageSync('token')
                                        // Authorization:'Bearer' + 'a696f19e-f3c5-4898-b9fe-11ff2a11681c'
                                    },
                            		success: res => {
                                        console.log(res)
                            			if ((this.img_list? this.img_list.length : 0) >= 20) //限制
                            				return uni.showToast({
                            					title: '最多上传' + 20 + '张图片',
                            					icon: 'none',
                            					position: 'bottom'
                            				});
                                            if(JSON.parse(res.data).fileList){
                                                if(JSON.parse(res.data).fileList[0].url){
                                                    // 我是电梯井图片
                                                    let img_url = JSON.parse(res.data).fileList[0].url
                                                    this.img_list_fileId.push(JSON.parse(res.data).fileList[0].fileId)
                                                    img_url = img_url.replace("opt/","")
                                                    img_url = img_url.replace("//","/")
                                                    console.log(that.img_list)
                                                    that.img_list.push("http://115.236.28.75:8088"+ img_url)
                                                    that.$emit('obtain_img',obj)
                                                    this.$forceUpdate()
                                                    return
                                                }
                                               let img_url = JSON.parse(res.data).fileList[0]
                                               console.log(img_url)
                                               img_url = img_url.replace("opt/","")
                                               that.img_list.push("http://115.236.28.75:8088" + img_url)
                                               let obj = {
                                                   images:that.img_list,
                                               }
                                               that.$emit('obtain_img',obj)
                                               this.$forceUpdate()
                                            }else{
                                                let img_url = JSON.parse(res.data).path[0]
                                                img_url = img_url.replace("opt/","")
                                                that.img_list.push( "http://115.236.28.75:8088" + img_url)
                                                console.log(that.img_list)
                                                let obj = {
                                                    images:that.img_list,
                                                    name:that.linename,
                                                    num:that.num
                                                }
                                                that.$emit('obtain_img',obj)
                                                this.$forceUpdate()
                                            }
                            		},
                                    fail:(res) => {
                                        console.log(res)
                                    },
                            	});
                            	uni.hideLoading() //关闭加载框
                            });
                       
					}
				});
			},
			//删除
			selec(index) {
                if(this.pointType === 5) {
                    console.log(index)
                    console.log(this.fild_list)
                    let idarr = this.fild_list.concat(this.img_list_fileId)
                    console.log(idarr[index])
                    console.log(api.apis.gpscoordinatefiledelete + idarr[index])
                    util.myrequest(
                        api.apis.gpscoordinatefiledelete + idarr[index],
                        {
                           
                        },
                        "POST"
                    ).then(res=>{
                        console.log(res)
                        console.log(this.img_list)
                        this.$emit('obtain_img', this.img_list)
                        this.$forceUpdate()
                    })
                }
                
                if(this.pointType === 1 || this.pointType === 3|| this.pointType === 2 || this.pointType === 6){
                    console.log(this.fild_list)
                    let idarr = this.fild_list.concat(this.img_list_fileId)
                    console.log(idarr[index])
                    console.log(api.apis.gpscoordinatefiledelete + idarr[index])
                    util.myrequest(
                        api.apis.gpscoordinatefiledelete + idarr[index],
                        {
                           
                        },
                        "POST"
                    ).then(res=>{
                        console.log(this.img_list)
                        this.$emit('obtain_img', this.img_list)
                        this.$forceUpdate()
                    })
                }
                console.log("我走到这了")
                this.img_list.splice(index, 1)
                try{
                    if(this.fild_list[index]){
                        console.log("我进来了")
                       this.fild_list.splice(index,1)
                       this.$forceUpdate()
                    }
                }catch(e){
                    console.log("我报错了")
                }
                
                this.$emit('deltain_img_', this.img_list)
                this.$forceUpdate()
				
			},
			//预览
			preview(index, urls) {
				console.log(index)
				console.log(urls)
				uni.previewImage({
					urls: urls,
					current: index,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'); 
                            if(data.tapIndex + 1 == 1){
                               uni.downloadFile({
                               		url:urls[data.index],
                               		success: res => {
                                        console.log(res)
                               			if (res.statusCode === 200) {
                               				uni.saveImageToPhotosAlbum({
                               					filePath: res.tempFilePath,
                               					success: function() {
                               								uni.showToast({
                               								    title:"保存成功",
                                                                icon:'none'
                               								})
                               							},
                               							fail: function() {
                               								// this.tools.toast('保存失败，请稍后重试');
                               							uni.showToast({
                               							    title:"保存失败",
                               							    icon:'none'
                               							})
                                                        }
                               						});
                               					} else {
                               						// this.tools.toast('下载失败');
                               					}
                               				}
                               			});
                            }
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style>
	page {
		
	
		box-sizing: border-box;
	}

	.fanku_con {
		width: 100%;
        height: auto;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.imgadf {
		width: 120rpx;
		height: 120rpx;
		background-color: rgba(255, 255, 255, 0.5);
		/* margin-left: 29rpx; */
		margin-left: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		font-size: 20rpx;
		color: #666666;
		flex-direction: column;
	}

	.img_z {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		padding-right: 10rpx;
		box-sizing: border-box;
	}

	.shancs {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background-color: #FFFFFF;
		border-radius: 100%;
	}

	.dianhua_on {
		width: 364rpx;
		height: 74rpx;
		background: linear-gradient(to right, #F55C63, #F78361);
		border-radius: 38rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 130rpx;
		margin-left: 192rpx;
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
